<!-- 已选择列表 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      title="已选择列表"
      :bodyStyle="{ paddingTop: '15px' }"
      :destroyOnClose="true"
      :footer="null"
      centered
      :width="1200"
      v-model="visible"
    >
      <div class="disFlxJS _pb-15">
        <div>
          <span
            >共<a>{{ list && list.length }}</a
            >人</span
          >
          <a-button
            class="_ml-10"
            type="primary"
            @click="handleDel(selectedRowKeys)"
            :disabled="!selectedRowKeys.length"
            >批量移除<span v-if="selectedRowKeys.length">（{{ selectedRowKeys.length }}人）</span></a-button
          >
          <a-button v-if="dataSource !== 'applyUserList'" class="_ml-10" type="primary" @click="handleDel()"
            >全部移除</a-button
          >
        </div>
        <div>
          <a-form-model layout="inline" :model="queryParam">
            <a-form-model-item>
              <a-input class="width-200" v-model="queryParam.keyword" placeholder="姓名、手机号、单位名称" allowClear />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="handleSearch"> 查询 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>

      <a-card :bordered="false" :bodyStyle="{ padding: '0px' }">
        <s-table
          size="default"
          ref="table"
          rowKey="userId"
          :columns="columns"
          :data="loadData"
          :rowSelection="rowSelection"
        >
          <!-- 用户信息 -->
          <template slot="userInfo" slot-scope="text, record, index">
            <div class="disFlxAC">
              <a-avatar size="default" icon="user" :src="record.avatar" />
              <div class="_pl-10 fz-12">
                <div>{{ record.userName }}</div>
                <div>{{ record.phone }}</div>
              </div>
            </div>
          </template>
          <!-- 用户类型 -->
          <template slot="applyType" slot-scope="text, record, index">
            <DictTag :options="Dict.getLocal('applyTypeDict')" :value="record.applyType" isText showBorder />
          </template>
          <!-- 公众号关注状态 -->
          <span slot="isOfficialAccount" slot-scope="text">
            <DictTag :options="Dict.getLocal('isOfficialAccountDict')" :value="text" isText />
          </span>

          <!-- 操作 -->
          <span slot="action" slot-scope="text, record">
            <a-button
              v-if="dataSource !== 'applyUserList'"
              type="primary"
              ghost
              size="small"
              @click="handleDel([record.userId])"
              >移除</a-button
            >
          </span>
        </s-table>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import DictTag from '@/components/DictTag'
import { MemberInfoSearchVoList } from '@/api/system/system'


export default {
  props: ['list', 'dataSource', 'objectId'],
  components: {
    STable,
    DictTag,
  },
  data() {
    return {
      visible: false,
      columns: [
        {
          title: '用户信息',
          dataIndex: 'userInfo',
          width: '200px',
          scopedSlots: { customRender: 'userInfo' },
          align: 'left',
        },
        { title: '用户单位', dataIndex: 'companyName', ellipsis: true },
        { title: '单位职务', dataIndex: 'companyPosition', width: '120px', ellipsis: true },
        { title: '会员职务', dataIndex: 'memberLevelName', width: '100px', ellipsis: true },
        {
          title: '用户类型',
          dataIndex: 'applyType',
          width: '90px',
          scopedSlots: { customRender: 'applyType' },
        },
        {
          title: '公众号',
          dataIndex: 'isOfficialAccount',
          width: '120px',
          scopedSlots: { customRender: 'isOfficialAccount' },
        },
        {
          title: '操作',
          width: '80px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: parameter => {
        return MemberInfoSearchVoList({
          ...this.queryParam,
          dataSource: this.dataSource,
          objectId: this.objectId,
          userIds: this.list,
          current: parameter.current,
          size: parameter.pageSize 
        }).then(res=>{
          res.data.records = this.list.length ? res.data.records : [];
          res.data.total = this.list.length ? res.data.total : 0;
          return res
        })
      },
      selectedRowKeys: [],
      queryParam: {
        keyword: undefined,
      },
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        getCheckboxProps: () => ({
          props: {
            disabled: this.dataSource === 'applyUserList',
          },
        }),
      }
    },
  },
  watch: {
    list: {
      handler: function () {
        this.$refs.table && this.$refs.table.refresh(false)
      },
      deep: true,
    },
  },
  methods: {
    moduleShow() {
      this.visible = true
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    //表格数据选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    //移除数据
    handleDel(ids) {
      if (!ids) this.$emit('del', [])
      else {
        let list = this.list.filter((f) => !ids.includes(f))
        this.$emit('del', list)
        this.selectedRowKeys = []
      }
    },
  },
}
</script>
<style scoped>
.btn {
  text-align: right;
}
.cancel {
  margin-right: 10px;
}
</style>
